<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-21 14:38:28
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-09-20 15:17:24
 * @FilePath: \orderApp\pages\rank\components\dishesRank.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="content">
    <view v-if="rankList.length">
      <view
        v-for="(item, index) in rankList"
        :key="index"
        margin="15rpx 0 "
        class="rankItem"
      >
        <view class="rank-Idx">{{ index + 1 }}</view>
        <view class="left">
          <view class="ellipsis title">
            {{ item.recipeName }}
          </view>
          <view class="moreBtn flex flex-items-center" @click="lookMore(item)">
            <p>查看更多</p>
            <uv-icon name="arrow-right" color="#969799" size="16"></uv-icon>
          </view>
        </view>
        <view class="flex">
          <uv-icon
            name="tianchong_fuben3"
            custom-prefix="custom-icon"
            color="#FF363F"
            size="27"
          ></uv-icon>
          <p class="heat">
            {{ item?.heat || 0 }}
          </p>
        </view>
      </view>
    </view>
    <cu-empty v-else></cu-empty>
  </view>
</template>

<script lang="ts" setup>
import { reqHistoryRecipe } from "@/service/business/goods";

import { useUserStore } from "@/store";
const userStore = useUserStore();

onMounted(() => {
  getHistoryRecipe();
});

const rankList = ref([]);

const getHistoryRecipe = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  const params = {
    kitchenId: userStore.userInfo.user.kitchenId,
    sign: 1,
  };
  reqHistoryRecipe(params).then((res) => {
    if (res.retCode == 2000) {
      uni.hideLoading();
      rankList.value.push(...res.data);
    }
  });
};

const lookMore = (item) => {
  if (!item) {
    uni.showToast({
      title: "暂无更多内容",
      icon: "none",
      mask: true,
    });
    return false;
  }
  console.log(item);
  uni.navigateTo({
    url:
      "/packageOne/pages/historicalRecipes/recipeDetail?id=" +
      item.recipeId +
      "&start=" +
      item.beginTime +
      "&end=" +
      item.endTime,
  });
};
</script>

<style lang="scss" scoped>
//
.content{
  overflow-y: auto;
}

.hotBox {
}
.left {
  width: 68%;
  margin-right: 6%;
  .title {
    font-size: 31rpx;
    font-weight: 600;
    line-height: 46rpx;
    color: #111111;
  }
}

.moreBtn {
  font-size: 27rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: #969799;
}
.heat {
  margin-left: 6rpx;
  font-size: 27rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: #323233;
}
</style>
